// ChatArea.tsx
import React from 'react';
import { Avatar } from 'antd';
import { UserOutlined, RobotOutlined } from '@ant-design/icons';

interface ChatAreaProps {
  messages: string[];
}

const ChatArea: React.FC<ChatAreaProps> = ({ messages }) => {
  return (
    <div className="chat-area" style={{ maxHeight: '60vh', overflowY: 'auto', padding: '20px' }}>
      {messages.map((msg, index) => {
        const isUser = index % 2 === 0; // 假设偶数索引是用户消息，奇数索引是AI消息
        return (
          <div
            key={index}
            className="chat-message"
            style={{
              display: 'flex',
              flexDirection: isUser ? 'row' : 'row-reverse',
              alignItems: 'flex-start',
              marginBottom: '20px',
              gap: '12px'
            }}
          >
            <Avatar
              icon={isUser ? <UserOutlined /> : <RobotOutlined />}
              style={{
                backgroundColor: isUser ? '#1890ff' : '#52c41a',
                flexShrink: 0
              }}
            />
            <div
              style={{
                maxWidth: '70%',
                padding: '12px 16px',
                borderRadius: '12px',
                backgroundColor: isUser ? 'rgba(24, 144, 255, 0.1)' : 'rgba(82, 196, 26, 0.1)',
                color: '#fff'
              }}
            >
              <p style={{ margin: 0, lineHeight: '1.5' }}>{msg}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default ChatArea;